﻿<div>
	<h1>Search...</h1>
	<div style="display: inline-block; vertical-align: top;">
		<div>
			<h3>By Image</h3>
			<div>
				<div class="search-by-image">
					<input type="file" data-upload-model="model.byImage.uploadFiles" style="width: 300px"
						data-ng-disabled="model.byImage.isAnalyzing" />
				</div>
				<button style="margin-top: 20px;" data-ng-click="model.byImage.search()" data-ng-disabled="model.byImage.isAnalyzing">Search By Image</button>
				<div data-ng-show="model.byImage.isAnalyzing">
					<timer interval="1000" countdown="20">
					<div class="progress progress-striped active">
						<div class="bar" style="width: {{100-5*seconds}}%;">
							<div style="width:100%; text-align: left;">
								<span style="vertical-align:middle; padding-left:10px;">Analyzing...</span>
							</div>
						</div>
					</div>
				</timer>
				</div>
			</div>
			<div class="search-by-image">
				<h3>By Color</h3>
				<div>
					<div style="">
						<div data-ng-repeat="colorpicker in model.byColor.colorpickers">
							<div style="display: inline-block; margin-right: 10px; width: 20px;">
								<a data-ng-show="$index>0" data-ng-click="model.byColor.colorpickers.splice($index,1)">
									<img src="../../../Content/images/delete.png" /></a>
							</div>
							<div style="display: inline-block; margin-top: 10px;">
								<div style="display: inline-block; vertical-align: middle;">
									<div style="width:120px;">
										<label style="display: inline-block;margin-right:7px;">R:</label>
										<div id="red" data-ui-slider="colorpicker.colorOptions" data-ng-model="colorpicker.red" class="horizontal-slider"></div>
									</div>
									<div>
										<label style="display: inline-block;margin-right:7px;">G:</label>
										<div id="green" data-ui-slider="colorpicker.colorOptions" data-ng-model="colorpicker.green" class="horizontal-slider"></div>
									</div>
									<div>
										<label style="display: inline-block;margin-right:7px;">B:</label>
										<div id="blue" data-ui-slider="colorpicker.colorOptions" data-ng-model="colorpicker.blue" class="horizontal-slider"></div>
									</div>
								</div>
								<div class="swatch" data-ng-style="colorpicker.swatchStyle"></div>
								<div class="colorpicker-percents">
									<div>
										<label class="horizontal-slider" style="display: inline-block;">Percent:</label>
										<div id="percent" data-ui-slider="colorpicker.toleranceOptions" data-ng-model="colorpicker.percent" class="horizontal-slider" style="margin-left: 2px; display: inline-block;"></div>
									</div>
									<div>
										<label class="horizontal-slider" style="display: inline-block;">Tolerance:</label>
										<div id="tolerance" data-ui-slider="colorpicker.toleranceOptions" data-ng-model="colorpicker.tolerance" class="horizontal-slider" style="margin-left: 2px; display: inline-block;"></div>
									</div>
									<div>
										<label style="display: inline-block;font-size: 0.85em; margin-top:10px;">
											{{colorpicker.percent}}% of the image is within {{colorpicker.tolerance}}% 
										</label>
										<label style="display: block;font-size: 0.85em; margin-top:5px;">
											of RGB value ({{colorpicker.red}}, {{colorpicker.green}}, {{colorpicker.blue}})
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div style="margin-top: 20px;">
						<button style="display: inline-block; vertical-align: middle" data-ng-click="model.byColor.search()">Search By Color</button>
						<div class="colorpicker-addanother">
							<a style="display: inline-block;" class="action-link" data-ng-click="model.byColor.addColorPicker()">
								<img src="../../../Content/images/addFolder.png" />Add Another Color</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div style="display: inline-block;">
		<h3>By Pattern</h3>
		<div>
			<div class="search-by-pattern">
				<div data-ng-repeat="group in model.byPattern.groups" style="padding-left: 15px;">
					<h4 style="display: block; margin-top: 5px">{{group.Name}}</h4>
					<div data-ng-repeat="pattern in group.Patterns" class="pattern-container">
						<div class="pattern-item">
							<img data-ng-class="model.byPattern.isSelected(pattern.Id)" data-ng-click="model.byPattern.select(pattern.Id)"
								data-ng-src="/Content/images/patterns/{{pattern.IconUrl}}.png" />
							<span>{{pattern.Name}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<button style="margin-top: 20px;" data-ng-click="model.byPattern.search()">Search By Pattern</button>
	</div>
</div>
